
<template>
  <div class="all">
    <div class="headbox">
      <Head></Head>
    </div>
    <div class="body">
      <div class="menubox">
        <Menu></Menu>
      </div>
      <div class="mainbox">
        <router-view> </router-view>
      </div>
    </div>
    <div class="footerbox">
      <Footer />
    </div>
  </div>
</template>
<script>
import Head from "../components/head";
import Menu from "../components/menu";
import Footer from "../components/Footer";
export default {
  name: "index",
  data() {
    return {};
  },
  components: {
    Head,
    Menu,
    Footer,
  },
  mounted() {
    this.$router.push({ path: "/TheThink" });
  },
  methods: {},
};
</script>

<style scoped>
.all {
  margin: auto;
  width: 100%;
  height: 100%;
}
.headbox {
  width: 100%;
  height: 70px;
}
.body {
  margin: auto;
  width: 100%;
  height: 800px;
  background: transparent;
  /* background: url(https://www.imageoss.com/images/2022/01/10/-----4k_9428e4615a093896.jpg); */
  display: flex;
}
.menubox {
  width: 203px;
  height: 100%;
  min-height: 730px;
  position: relative;
  background: transparent;
}
.menubox::after {
  content: "";
  position: absolute;
  height: 100%;
  min-height: 730px;
  width: 2px;
  background: linear-gradient(#f64f59, #12c2e9);
  right: 1px;
  top: 0px;
  filter: blur(1px);
}
.mainbox {
  flex: 5;
  height: 100%;
  min-height: 730px;
  background: transparent;
    /* background:rgba(255,255,255,0.3); */
}
.footerbox {
  margin: auto;
  width: 100%;
  position: relative;
  height: 99px;
  background: transparent;
}
.footerbox::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  background: linear-gradient(to right, #12c2e9, #f64f59);
  top: -1px;
  filter: blur(1px);
}
</style>
